* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.all {
  width: 100%;
  height: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  background-color: #eee;
}

.box {
  width: 96%;
  height: 100%;
  margin: 0 auto;

}

.top {
  display: flex;
  margin: 10px 0 25px 0;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}

.top>h1 {
  margin: 20px 0;
  display: block;
}

.top>img {
  width: 100%;
  border-radius: 10px;
}

.qihang {
  width: 100%;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  background-color: azure;
}

.qihang-head {
  width: 100%;
  display: block;
  margin-bottom: 10px;

}

.qihang-head>h1,
.qihang-head>span {
  display: inline-block;
}

.qihang-left {
  width: 50%;
}

.qihang-left img {
  width: 98%;
}

.qihang-right {
  display: flex;
  width: 50%;
  flex-wrap: wrap;
  justify-content: space-between;
  /* align-items: center; */
  /* justify-content: space-around; */
}

.img1 {
  width: 98%;
}

.img2 {
  width: 49%;
}

.img3 {
  width: 49%;
}

.img4 {
  margin-top: 10px;
  width: 100%;
}

.lingyun {
  width: 100%;
  height: 10%;
  position: relative;
  overflow: hidden;
}

.viewpage {
  width: 300%;
  left: 0;
  top: 0;
  position: absolute;
  animation: move 8s linear infinite;
}

.viewpage>img {
  width: 33.3%;
  float: left;
}

@keyframes move {
  0% {
    left: 0px;
  }

  25% {
    left: 0px;
  }

  50% {
    left: -100%;
  }

  75% {
    left: -100%;
  }

  100% {
    left: -200%;
  }
}

.footer {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100px;
}

.footer>div {
  width: 20%;
  height: 100px;
  /* background-color: antiquewhite; */
}

.footer>div>a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  text-decoration: none;
  font-size: 16px;
  color: black;
}

.footer>div:hover .footer>div>a {
  color: cornflowerblue;
}

.footerem1 {
  background: url(../img/icon_g_home.png) no-repeat;
  background-position: 60% 30%;
  background-size: 90%;
}

.footerem1:hover {
  background: url(../img/icon_b_home.png) no-repeat;
  background-position: 60% 30%;
  background-size: 90%;
}

.footerem1:hover .a1 {
  color: #2E8BFF;
}

.footerem2 {
  background: url(../img/icon_g_skill.png) no-repeat;
  background-position: 30% 30%;
  background-size: 90%;
}

.footerem2:hover {
  background: url(../img/icon_b_skill.png) no-repeat;
  background-position: 60% 30%;
  background-size: 90%;
}

.footerem2:hover .a2 {
  color: #2E8BFF;
}

.footerem3 {
  background: url(../img/icon_g_shop.png) no-repeat;
  background-position: 30% 30%;
  background-size: 90%;
}

.footerem3:hover {
  background: url(../img/icon_b_shop.png) no-repeat;
  background-position: 60% 30%;
  background-size: 90%;
}

.footerem3:hover .a3 {
  color: #2E8BFF;
}

.footerem4 {
  background: url(../img/icon_g_inspect.png) no-repeat;
  background-position: 30% 30%;
  background-size: 90%;
}

.footerem4:hover {
  background: url(../img/icon_b_inspect.png) no-repeat;
  background-position: 60% 30%;
  background-size: 90%;
}

.footerem4:hover .a4 {
  color: #2E8BFF;
}

.footerem5 {
  background: url(../img/icon_g_wd.png) no-repeat;
  background-position: 30% 30%;
  background-size: 90%;
}

.footerem5:hover {
  background: url(../img/icon_b_wd.png) no-repeat;
  background-position: 60% 30%;
  background-size: 90%;
}

.footerem5:hover .a5 {
  color: #2E8BFF;
}